<template>
  <!-- 告警规则管理 -->
  <div class="filterContent">
    <a-form :model="filterForm" layout="inline">
      <a-form-item label="告警类别">
        <a-select
          ref="select"
          v-model:value="filterForm.ruleType"
          class="formSelect"
          placeholder="请选择"
          style="width: 120px"
          allow-clear
        >
          <a-select-option
            v-for="item in RULE_TYPE_LIST"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="告警等级">
        <a-select
          ref="select"
          v-model:value="filterForm.warnLevel"
          class="formSelect"
          placeholder="请选择"
          style="width: 170px"
          allow-clear
        >
          <a-select-option
            v-for="item in WARN_LEVEL_LIST"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="告警规则名称">
        <a-input
          v-model:value="filterForm.ruleName"
          placeholder="请输入"
          allow-clear
          style="width: 150px"
        />
      </a-form-item>
      <a-form-item label="告警状态类别">
        <a-select
          ref="select"
          v-model:value="filterForm.warnType"
          class="formSelect"
          placeholder="请选择"
          style="width: 120px"
          allow-clear
          show-search
          :filter-option="filterOption"
          optionFilterProp="label"
        >
          <a-select-option
            v-for="item in listWarnName"
            :value="item.val"
            :key="item.val"
            :label="item.title"
          >
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="涉及层级">
        <a-select
          ref="select"
          v-model:value="filterForm.warnEquipLevel"
          class="formSelect"
          placeholder="请选择"
          style="width: 120px"
          allow-clear
          show-search
          :filter-option="filterOption"
          optionFilterProp="label"
        >
          <a-select-option
            v-for="item in WARN_EQUIP_LEVEL_LIST"
            :value="item.value"
            :key="item.value"
            :label="item.label"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-button type="primary" class="filterBtn" @click="search">查询</a-button>
      <a-button type="primary" class="filterBtn greenBtn" @click="addWarnRule"
        >新增</a-button
      >
      <a-button
        type="primary"
        class="filterBtn yellowBtn"
        @click="showConfigStatus"
        >状态管理配置</a-button
      >
    </a-form>
  </div>
  <div class="tableContent" ref="tableContainerRef">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="tableScroll"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <span
            :style="record.status === 1 ? { color: 'green' } : { color: 'red' }"
          >
            {{ record.status === 1 ? " ● 启用" : " ● 禁用" }}
          </span>
        </template>
        <template v-if="column.key === 'handle'">
          <a-button type="link" @click="handleEdit(record)">编辑</a-button>
          <a-button
            type="link"
            v-if="record.status === 1"
            @click="forbiddenWarnRule(record)"
            >禁用</a-button
          >
          <a-button
            type="link"
            v-if="record.status === 0"
            @click="enAbleWarnRule(record)"
            >启用</a-button
          >
          <a-popconfirm
            ok-text="确认"
            cancel-text="取消"
            @confirm="confirmDel(record)"
          >
            <template #title> 是否确定删除? </template>
            <a-button type="link" danger>删除</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getWarnRuleList"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>

  <!-- 新增告警规则 -->
  <AddRule
    :addWarnRuleVisible="addWarnRuleVisible"
    :isEdit="isEdit"
    :rowData="rowData"
    :list="listWarnType"
    @update:addWarnRuleVisible="addWarnRuleVisible = $event"
    @getWarnRuleList="getWarnRuleList"
  />
  <StatusConfig
    :statusConfigVisible="statusConfigVisible"
    :rowData="rowData"
    :list="listWarnType"
    @update:statusConfigVisible="statusConfigVisible = $event"
    @getWarnRuleList="getWarnRuleList"
  />
</template>
<script setup>

import {
  RULE_TYPE_LIST,
  WARN_LEVEL_LIST,
  WARN_EQUIP_LEVEL_LIST,
} from "@/constants/stationConfig.js"
import AddRule from "./addRule.vue"
import StatusConfig from "@/views/EventView/AlarmManage/AlarmRule/statusConfig.vue"
import useTableScroll from "@/hooks/useTableScroll"
const $api = inject("$api")
const filterForm = ref({
  ruleType: null,
  warnLevel: null,
  ruleName: null,
  warnEquipLevel: null,
  size: 10,
  current: 1,
})
const total = ref()
const addWarnRuleVisible = ref(false)
const accountManageVisible = ref(false)
const statusConfigVisible = ref(false)

const tableData = ref([])
const isEdit = ref(false)
const rowData = ref({})
const tableLoading = ref(false)
const columns = ref([
  {
    title: "告警规则名称",
    dataIndex: "ruleName",
    key: "ruleName",
    width: 200,
    align: "center",
  },
  {
    title: "告警层级",
    dataIndex: "warnEquipLevel",
    key: "warnEquipLevel",
    width: 120,
    align: "center",
  },
  {
    title: "告警等级",
    dataIndex: "warnLevel",
    key: "warnLevel",
    width: 140,
    align: "center",
  },
  {
    title: "告警状态",
    dataIndex: "status",
    key: "status",
    width: 150,
    align: "center",
  },
  {
    title: "状态分类",
    dataIndex: "warnTypeStr",
    key: "warnTypeStr",
    width: 150,
    align: "center",
  },
  {
    title: "告警规则备注",
    dataIndex: "comment",
    key: "comment",
    width: 220,
    align: "center",
  },
  {
    title: "告警触发",
    dataIndex: "maintenanceAdvice",
    key: "maintenanceAdvice",
    width: 180,
    align: "center",
  },

  {
    title: "创建时间",
    dataIndex: "createdTime",
    key: "createdTime",
    width: 180,
    align: "center",
  },
  {
    title: "更新时间",
    dataIndex: "updatedTime",
    key: "updateTime",
    width: 180,
    align: "center",
  },
  {
    title: "创建人",
    dataIndex: "createUserName",
    key: "createUserName",
    width: 180,
    align: "center",
  },
  {
    title: "更新人",
    dataIndex: "updateUserName",
    key: "updateUserName",
    width: 180,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 160,
    align: "center",
    fixed: "right",
  },
])
const search = () => {
  filterForm.value.current = 1
  getWarnRuleList()
}
const filterOption = (input, option) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
function handleResizeColumn(w, col) {
  col.width = w
}
const handleCompany = () => {
  isEdit.value = false
  addWarnRuleVisible.value = true
}
const confirmDel = async (data) => {
  const res = await $api.warnRuleDel(data.id)
  if (res && res.code === 0) {
    message.success("删除成功")
    getWarnRuleList()
  }
}
const forbiddenWarnRule = async (data) => {
  const params = {
    id: data.id,
    status: 0,
  }
  const res = await $api.warnRuleEdit(params)
  if (res && res.code === 0) {
    message.success("禁用成功")
    getWarnRuleList()
  }
}
const enAbleWarnRule = async (data) => {
  const params = {
    id: data.id,
    status: 1,
  }
  const res = await $api.warnRuleEdit(params)
  if (res && res.code === 0) {
    message.success("启用成功")
    getWarnRuleList()
  }
}

const showConfigStatus = () => {
  statusConfigVisible.value = true
}

const addWarnRule = () => {
  isEdit.value = false
  addWarnRuleVisible.value = true
}
const handleEdit = async (data) => {
  rowData.value = data
  isEdit.value = true
  addWarnRuleVisible.value = true
}

const getWarnRuleList = async () => {
  tableLoading.value = true
  const param = filterForm.value
  const res = await $api.alarmRulePage(param)
  tableLoading.value = false
  if (res && res.code === 0) {
    tableData.value = res.data.records.map((item) => {
      const levelMap = {
        1: "一级预警",
        2: "二级告警",
        3: "三级报警",
      }
      item.warnLevel = levelMap[item.warnLevel]
      return item
    })
    total.value = res.data.total
  }
}
const listWarnType = ref([])
const listWarnName = ref([])
const getListWarnType = async () => {
  const res = await $api.listWarnType()
  if (res && res.code === 0) {
    const flattenMenuList = (menuList) => {
      let result = []
      menuList.forEach((menu) => {
        if (menu.children && menu.children.length > 0) {
          result = result.concat(flattenMenuList(menu.children))
        } else {
          result.push(menu)
        }
      })
      return result
    }
    listWarnName.value = flattenMenuList(res.data)
    listWarnType.value = res.data
  }
}

const confirmHandleModelStatus = async (data) => {
  console.log("[ data ]-290", data)
  const params = {
    id: data.id,
    enable: data.status === 1 ? 0 : 1,
  }
  const res = await $api.userUpdate(params, "put")
  if (res && res.code === 0) {
    message.success("状态更新成功")
    getWarnRuleList()
  }
}
const tableContainerRef = ref(null)
const { tableScroll } = useTableScroll(tableData, tableContainerRef, 100)
const confirmMerge = async (data) => {}
onMounted(async () => {
  getWarnRuleList()
  getListWarnType()
})
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.formInput {
  width: 155px;
}
.filterBtn {
  margin: 0 20px 20px 0;
  &:last-child {
    margin-right: 0;
  }
}
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
</style>
